<template>
  <el-upload
      v-loading="loadingFlag"
      action
      accept=""
      class="avatar-uploader"
      :auto-upload="false"
      :on-change="uploadFile"
      :show-file-list="false"
  >
    <i class="el-icon-plus avatar-uploader-icon"/>
  </el-upload>
</template>
<script>
import * as imageConversion from 'image-conversion'// 图片压缩
export default {
  name: 'ComUpload',
  data() {
    return {
      loadingFlag: false
    }
  },
  props: {
    imgList:Array
  },
  methods: {
    async uploadFile(e) {
      console.log(e)
      const file = e.raw
      const size = file.size / 1024 / 1024 / 2
      if (
          !(
              file.type === 'image/png' ||
              file.type === 'image/gif' ||
              file.type === 'image/jpg' ||
              file.type === 'image/jpeg' ||
              file.type === 'image/webp' ||
              file.type === 'video/mp4'
          )
      ) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片或mp4格式的视频'
        })
      } else if (size > 100) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于100M'
        })
      } else {
        this.loadingFlag = true
        var formDat = new FormData()
        /* 压缩图片 */
        if (file.type !== 'video/mp4'){
          const blobfile = await imageConversion.compressAccurately(file, {size:700,type:'image/png'})// 设置压缩大小默认700k
          const resfile = new File([blobfile], file.name, {type: blobfile.type})// blob转file对象
          //console.log('File对象')
          //console.log(resfile)
          formDat.append('file', resfile)
          //console.log(formDat)
        }
        if(file.type === 'video/mp4'){
          formDat.append('file', file)
        }
        /* end */
        this.$http({
          url: '/sys/oss/upload',
          method: 'post',
          headers: { 'Content-Type': 'multipart/form-data' },
          data:formDat
        }).then(({data: res}) => {
          console.log(res)
          this.loadingFlag = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$emit('get-url', res.data.src)
        }).catch(() => {
        })
      }
    },
    /* 压缩图片 */
    compressFile(file) {
      return new Promise((resolve, reject) => {
        new imageConversion.ImageCompressor(file, {
          quality: 0.6, // 压缩质量
          checkOrientation: false, // 图片翻转，默认为false
          success(result) {
            //console.log(result)
            resolve(result)
          },
          error(e) {
            //console.log(e)
            reject()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.remove {
  font-size: 20px;
  position: absolute;
  top: -9px;
  right: -9px;
  color: #000 !important;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px !important;
  height: 140px !important;
  line-height: 140px;
  text-align: center;
}
.cl .avatar-uploader {
  width: 140px !important;
  height: 140px !important;
}
</style>
